/**
 * Timeline Block styles.
 */

// Variables.
$timeline-width: 36px;
$timeline-gutter: 24px;
$timeline-border-width: 4px;

// Styles shared between editor and frontend.
.wp-block-jetpack-timeline {

	// This padding needs extra specificity.
	&.wp-block-jetpack-timeline {
		margin: 0;
		padding: 0;
	}

	li.wp-block-jetpack-timeline-item {
		list-style-type: none;
		position: relative;
		padding: 1em 2em;

		// Make the spacing between items consistent so we can connect the timeline
		margin-bottom: $timeline-width;

		// Make room for the timeline.
		margin-left: $timeline-width;

		// Draw the line connecting to the timeline.
		.timeline-item__bubble {
			display: block;
			width: $timeline-width;
			height: $timeline-border-width;
			background-color: currentColor;
			position: absolute;
			top: 50%;
			transform: translateY( -( $timeline-border-width / 2 ) );
			left: -$timeline-width;
		}

		// Draw the vertical timeline line.
		.timeline-item::after {
			content: '';
			display: block;
			background: currentColor;
			position: absolute;
			left: -$timeline-width;
			top: -$timeline-width;
			bottom: -$timeline-width;
			width: $timeline-border-width;
		}
	}

	// Add special timeline starting point and end point.
	[data-type='jetpack/timeline-item']:first-child .timeline-item::after, // Editor
	& > li.wp-block-jetpack-timeline-item:first-child .timeline-item::after { // Frontend
		top: 50%;
	}

	[data-type='jetpack/timeline-item']:nth-last-child( 2 )  .timeline-item::after, // Editor, is the 2nd last child here
	& > li.wp-block-jetpack-timeline-item:last-child .timeline-item::after { // Frontend
		bottom: 50%;
	}

}


/**
 * Alternating Bubbles
 */


@media only screen and ( min-width: 640px ) {
	ul.wp-block-jetpack-timeline.is-alternating {
		display: flex;
		flex-direction: column;

		// Bubbles.
		.wp-block-jetpack-timeline-item {
			width: calc( 50% - #{ $timeline-width } + #{ $timeline-border-width / 2 } );
		}

		// Left aligned.
		.wp-block-jetpack-timeline-item.is-left.is-left.is-left, // Both, explicitly set. Needs specificity.
		[data-type='jetpack/timeline-item']:nth-child( odd ) .wp-block-jetpack-timeline-item:not( .is-right ), // Editor
		& > .wp-block-jetpack-timeline-item:nth-child( odd ):not( .is-right ) { // Frontend
			margin-left: 0;
			margin-right: auto;

			// Adjust the the line connecting to the timeline.
			.timeline-item__bubble {
				left: auto;
				right: -$timeline-width;
			}

			// Adjust the vertical line.
			.timeline-item::after {
				left: auto;
				right: -$timeline-width;
			}
		}

		// Right aligned.
		.wp-block-jetpack-timeline-item.is-right.is-right.is-right, // Both, explicitly set. Needs specificity.
		[data-type='jetpack/timeline-item']:nth-child( even ) .wp-block-jetpack-timeline-item:not( .is-left ), // Editor
		.wp-block-jetpack-timeline-item:nth-child( even ):not( .is-left ) { // Frontend
			margin-left: auto;
			margin-right: 0;
		}
	}
}
